<template>
    <div>
                    <!-- 绑定要轮播的图片列表   autoplay表示自动轮播  -->
        <wgy-swiper :banners="banners" autoplay></wgy-swiper>
        <div id="bargain" @click="goArgainList">
                <!-- 全民砍价 -->
            <wgybargain ></wgybargain>
            <!-- li -->
            <wgyoneli :list='list'></wgyoneli>
        </div>
        <!-- 精選專題 -->
       <div class="special" @click="goSift">
            <wgySpecial :article='article'></wgySpecial>
       </div>
        <!-- 人氣推薦 -->
        <wgyRecommend></wgyRecommend>

    </div>
</template>

<script>
import { getBanners,getGoodsList,getArticle } from '../../utils/api/Home'
import wgySwiper from '@/components/wgy-Swiper/wgy-Swiper'
import wgybargain from '@/components/wgy-Bargain/wgy-Bargain'
import wgyoneli from '@/components/wgy-oneLi/wgy-oneLi'
import wgySpecial from '@/components//wgy-special/wgy-special'
import wgyRecommend from '@/components/wgy-recommend/wgy-recommend'
export default {
    name: 'index',
    data() {
        return {
            // 轮播图
            banners:[],
            // 砍价的那一个
            list:[],
            // 专题
            article:[],
        };
    },
    created() {
        // 获取轮播图图片
        getBanners().then(res => {
            this.banners = res.data
        }),
        // 获取全民砍价第一个
        getGoodsList().then(res => {
            this.list.push(res.data[9])
        }),
        // 获取精选专题
        getArticle().then(res => {
            // console.log(res.data);
            this.article = res.data
            
        })
        
    },
    methods: {
        // 跳转到砍价列表页
        goArgainList() {
            this.$router.push('/argainList')
        },
        // 由home页面跳转到精选列表页
        goSift() {
            console.log(2);
            
            this.$router.push('/sift')
        },
    },
    //组件挂载
    components: {
        wgySwiper,
        wgybargain,
        wgyoneli,
        wgySpecial,
        wgyRecommend,
    },
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
    
#bargain{
    background-color: #fff;
}
.special{
    margin-bottom: .1rem;
}
</style>
